<template>
	<!-- 三机监测 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三机列表</text></view>
				</template>
				<view class="flex">
					<view class="m-r-10" style="width: 200rpx;">
						<uni-data-select v-model="value" :localdata="typeList" @change="change"></uni-data-select>
					</view>
					<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
				</view>
				<uni-table ref="table" stripe emptyText="暂无更多数据" style="width: 100%;">
					<uni-tr>
						<uni-th align="center" width="90">设备名称</uni-th>
						<uni-th align="center" width="80">车牌号</uni-th>
						<uni-th align="center" width="80">类型</uni-th>
						<uni-th align="center" width="80">运行状态</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index" style="background-color: red !important;">
						<uni-td align="center"><u--text :text="item.value" size="12" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value1" size="12" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value2" size="12" bold="true" align="center"></u--text></uni-td>
						<uni-td align="center"><u--text :text="item.value3" size="12" color="#29B57B" bold="true" align="center"></u--text></uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="1" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三机统计</text></view>
				</template>
				<view class="charts-box">
					<u-tag text="挖掘机" size="mini"></u-tag>
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
				<view class="charts-box">
					<u-tag text="铲车" size="mini"></u-tag>
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
				<view class="charts-box">
					<u-tag text="矿卡" size="mini"></u-tag>
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">三机能耗统计分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3])
	
	let currentKey = ref(0),
		chartData = ref({}),
		chartData1 = ref({}),
		tableData = ref([{
			value: '采煤对01',
			value1: '甘KE0888',
			value2: '挖掘机',
			value3: '在线'
		}, {
			value: '采煤对01',
			value1: '甘KE0888',
			value2: '挖掘机',
			value3: '在线'
		}]),
		typeList = ref([{
			value: 0,
			text: "挖掘机"
		}, {
			value: 1,
			text: "推土机"
		}, {
			value: 2,
			text: "矿卡"
		}, ]),
		opts1 = {
			color: ["#5593FF", "#FFB255", "#EE752F", "#55BEFF", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: false
			},
			title: {
				name: "总数",
				fontSize: 16,
				color: "#333333"
			},
			subtitle: {
				name: "230",
				fontSize: 20,
				color: "#0853FF"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		}
	const selectChange = (item) => {
		currentKey.value = item.index
		if (item.index == 0) {
			// 设备统计
		} else {
			// 设备列表
		}
	}
	const getServerData1 = () => {
		// 告警分析
		setTimeout(() => {
			let res = {
				series: [{
					data: [{
						name: '在线',
						value: 56,
						labelText: '在线: 56'
					}, {
						name: '故障',
						value: 12,
						labelText: '故障: 56'
					}, {
						name: '故障',
						value: 20,
						labelText: '故障: 20'
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	getServerData1()
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}

	.leader-list {
		.leader-list-item {
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052D9;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;

				.location {
					width: 80rpx;
					height: 80rpx;
					background: url('/static/img/arrow.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>